<template>
	<view>
		<u-toast ref="uToast" />
		<div style="display: flex;">
			<view style="padding: 20rpx;width: 150rpx;" v-show="typeNum">
				<u-button type="primary" :plain="true" :hairline="true" text="去跟踪" @click="changeTrack1"></u-button>
			</view>

			<view style="padding: 20rpx;width: 150rpx;" v-show="typeNumSH">
				<u-button type="primary" :plain="true" :hairline="true" text="去分配" @click="changeTrack2"></u-button>
			</view>

			<view style="padding: 20rpx;width: 150rpx;" v-show="typeNumSH">
				<u-button type="primary" :plain="true" :hairline="true" text="线索转移" @click="changeTrack3"></u-button>
			</view>
		</div>

		<view class="plateNt">
			<u-cell-group v-for="(item,i) in list" :key="i">
				<u-cell border-bottom="false" border-top="false" @click="changeTrack(item.itemId)"
					:title="item.trackDate" :isLink="true" :label="item.remark" center user-select>
				</u-cell>
			</u-cell-group>
		</view>










		<u-picker :show="show1" :closeOnClickOverlay="true" @cancel="closePopup" @close="closePopup" :columns="columns1"
			keyName="userName" @confirm="changeHandler1" title="请选择客户经理"></u-picker>
			
		<u-picker :show="show2" :closeOnClickOverlay="true" @cancel="closePopup2" @close="closePopup2" :columns="columns2"
			keyName="companyName" @confirm="changeHandler2" title="请选择门店"></u-picker>

	</view>

</template>
<script>
	import store from '@/store/index.js';
	export default {

		data() {
			return {
				list: [],
				itemId: '',
				objItem: {

				},
				typeNum: true,
				typeNumSH: false,
				show1: false,
				columns1: [],
				show2: false,
				columns2: []
			}
		},
		onLoad(option) {

			var that = this
			var titleName = JSON.parse(option.name).titleNameNum
			if (titleName == '战败' || titleName == '已转工单' || titleName == '已结算工单') {
				this.typeNum = false
			}
			
			that.$request('checkIsLeader', {
				userCode: uni.getStorageSync('changeUserList').userCode
			
			}, 'get').then(res2 => {
				if (res2.code == 200) {
					this.typeNumSH = res2.data
					
					
					if (titleName == '战败' || titleName == '已转工单' || titleName == '已结算工单') {
						this.typeNumSH = false
					}
				}
			})




			if (JSON.parse(option.name).clueId) {
				that.objItem = JSON.parse(option.name)
				that.$store.commit("objItemDataList", that.objItem)
			}


		},

		onShow() {
			var that = this
			uni.showLoading({
				title: '加载中',
				mask: true,
				icon: 'loading',
			});

			that.$request('getClueItemList', {
				clueId: store.state.objItemData.clueId
				// clueId: '2578e27a20524d318ea59b52f646049d'
			}, 'get').then(res2 => {
				if (res2.code == 200) {
					uni.hideLoading();
					that.list = res2.data


				} else {
					that.$refs.uToast.error(`${res2.message}`)
					uni.hideLoading();
				}
			})



			



		},
		methods: {
			//切换车辆

			closePopup() {
				this.show1 = false
			},
			closePopup2() {
				this.show2 = false
			},
			

			changeTrack(e) {
				uni.navigateTo({
					url: '/pagesA/index/uploadLook?name=' + e

				})
			},
			changeTrack1(e) {
				var that = this
				uni.navigateTo({
					url: '/pagesA/index/upload?name=' + JSON.stringify(that.objItem)

				})
			},

			changeTrack2() {
				var that = this
				uni.showLoading({
					title: '加载中',
					mask: true,
					icon: 'loading',
				});
				that.$request('getCluePerson', {
					companyCode: uni.getStorageSync('changeUser').companyCode

				}, 'get').then(res2 => {
					if (res2.code == 200) {
						this
							.show1 = true
						this.columns1[0] = res2.data
						uni.hideLoading();
						


					}
				})
			},
			
			changeTrack3() {
				var that = this
				uni.showLoading({
					title: '加载中',
					mask: true,
					icon: 'loading',
				});
				that.$request('getCompanyAndUser',  'get').then(res2 => {
					if (res2.code == 200) {
						this
							.show2 = true
						this.columns2[0] = res2.data
						uni.hideLoading();
						
			
			
					}
				})
			},
			


			changeHandler1(e) {

				var that = this
				uni.showLoading({
					title: '加载中',
					mask: true,
					icon: 'loading',
				});
				that.$request('updateTrackPerson', {
					clueId: that.objItem.clueId,
					trackPerson: e.value[0].userCode
				}, 'get').then(res2 => {
					if (res2.code == 200) {
						this.show1 = false
						that.$refs.uToast.success(`${res2.message}`)
						uni.hideLoading();

					} else {
						that.$refs.uToast.error(`${res2.message}`)
						uni.hideLoading();
					}
				})

			},
			changeHandler2(e) {
			/* 
			 
			 http://10.65.135.195:8860/clue/uniapp/updateClueCompany?updateCompanyCode=''&updateUserCode=''&clueId=''
			 
			 
			 */
			
		
				var that = this
				uni.showLoading({
					title: '加载中',
					mask: true,
					icon: 'loading',
				});
				that.$request('updateClueCompany', {
					clueId: that.objItem.clueId,
					updateCompanyCode: e.value[0].companyCode,
					updateUserCode: uni.getStorageSync('changeUserList').userCode
				}, 'get').then(res2 => {
					if (res2.code == 200) {
						this.show2 = false
						that.$refs.uToast.success(`${res2.message}`)
						uni.hideLoading();
			
					} else {
						that.$refs.uToast.error(`${res2.message}`)
						uni.hideLoading();
					}
				})
			
			}

		}
	};
</script>
<style lang="scss" scoped>
	.bg-bao-light-title-box {
		// width: 240rpx;
		height: 50rpx;
		line-height: 50rpx;

		// color: #f4f5f5;
		font-size: 28rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.bg-bao-light-title-box-t {
		width: 120rpx;
		height: 50rpx;
		line-height: 50rpx;
		border: 1rpx solid #6d6d6d;
		// background-color: #367dee;
		// color: #f4f5f5;
		font-size: 28rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-top: 20rpx;

		.bg-bao-light-title-box-r {
			width: 35rpx;
			height: 35rpx;
			margin-top: -8rpx;
			// margin-left: 4rpx;
			vertical-align: middle;
			margin-left: 10rpx;
		}
	}

	.hover {
		background: #efefef;
	}

	.bg-bao-light {
		width: 315rpx;
		height: 100rpx !important;
		border-radius: 50rpx !important;
		background-color: #367dee;
		text-align: center;
		margin-left: 18rpx;
		color: #f5f5f5;
		line-height: 100rpx;

		.bg-bao-light-i {
			width: 50rpx;
			height: 50rpx;
			// line-height: 100rpx;
			margin-top: -10rpx;
			vertical-align: middle;
		}

	}

	.bg-bao {
		width: 315rpx;
		height: 100rpx !important;
		border-radius: 50rpx !important;
		background-color: #f88f37;
		text-align: center;
		margin-left: 18rpx;
		color: #f5f5f5;
		line-height: 100rpx;

		.bg-bao-i {
			width: 50rpx;
			height: 50rpx;
			// line-height: 100rpx;
			margin-top: -10rpx;
			vertical-align: middle;
		}
	}

	.titleT {
		height: 70rpx;
		margin-left: -25rpx;
		font-weight: bold;
		display: flex;

		.titleT-b {
			height: 42rpx;
			width: 14rpx;
			background-color: aqua;
		}
	}

	.wrap {

		width: 100%;
		overflow-x: hidden;
		padding: 25rpx;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.bg-purple {

		width: 76rpx;
		height: 76rpx;
		background: #6e8ef0;
		border-radius: 4px;

		.bg-purple-i {
			width: 60%;
			height: 60%;
			margin-left: 50%;
			margin-top: 50%;
			transform: translate(-50%, -50%);
		}

	}

	.bg-purple-light {
		color: #6d6d6d;
		// font-size: 26rpx;
	}

	.bg-purple-dark {
		width: 76rpx;
		height: 76rpx;

		.bg-purple-dark-i {
			width: 60%;
			height: 60%;
			margin-left: 50%;
			margin-top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.plateN {
		height: 80rpx;
		line-height: 80rpx;
		box-shadow: 4px 4px 15px #f5f5f5;
		margin-bottom: 50rpx;
	}

	.plateN-title {
		height: 180rpx;
		// width: 100%;
		box-shadow: 4px 4px 15px #f5f5f5;
		margin-bottom: 30rpx;
		// .plateN-title-a{
		// 	margin-right: 30rpx;
		// }

		.bg-purple-title {
			height: 150rpx;
			width: 150rpx;
			margin-left: 30rpx;
			background-color: #f4f5f5;

			.bg-purple-i-title {
				width: 60%;
				height: 60%;
				margin-left: 50%;
				margin-top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.bg-purple-light-title {
			width: 580rpx;
			margin: 20rpx 20rpx 0 20rpx;

			// width: 100%;
			.bg-bao-light-title-i {
				width: 50rpx;
				height: 50rpx;
				// line-height: 100rpx;
				margin-top: -10rpx;
				margin-right: 10rpx;
				vertical-align: middle;
			}
		}

		.bg-bao-light-title-r {
			width: 40rpx;
			height: 40rpx;
			margin-top: -2rpx;
			// margin-left: 4rpx;
			vertical-align: middle;
		}
	}
</style>